
import $ from 'jquery';

/**
 * Created by Administrator on 2017/2/18.
 */
window.onload = function(){
    search();
    scrollPic();
    secondKill();
};
/*头部搜索*/
var search = function(){
    /*搜索框对象*/
    var search = document.getElementsByClassName('jd_header_box')[0];
    /*banner对象*/
    var banner = document.getElementsByClassName('jd_banner')[0];
    /*高度*/
    var height = banner.offsetHeight;

    window.onscroll = function(){
        var top = document.body.scrollTop;
        /*当滚动高度大于banner的高度时候颜色不变*/
        if(top > height){
            search.style.background  = "rgba(201,21,35,0.85)";
        }else{
            var op = top/height * 0.85;
            search.style.background  = "rgba(201,21,35,"+op+")";
        }
    };
};

/*秒杀倒计时*/
var secondKill = function(){
    /*复盒子*/
    var parentTime = document.getElementsByClassName('sk_time')[0];
    /*span时间*/
    var timeList = parentTime.getElementsByClassName('num');
    //console.log(timeList.length);

    var times = 7   * 60 * 60;
    var timer;
    timer = setInterval(function(){
        times  -- ;

        var h = Math.floor(times/(60*60));
        var m = Math.floor(times/60%60);
        var s = times%60;

        //console.log(h+'-'+m+"-"+s);

        timeList[0].innerHTML = h>10?Math.floor(h/10):0;
        timeList[1].innerHTML = h%10;

        timeList[2].innerHTML = m>10?Math.floor(m/10):0;
        timeList[3].innerHTML = m%10;

        timeList[4].innerHTML = s>10?Math.floor(s/10):0;
        timeList[5].innerHTML = s%10;
        if(times <= 0)
        {
            clearInterval(timer);
        }
    },1000);
};

var scrollPic = function () {
    /*banner*/
    var banner = document.getElementsByClassName('jd_banner')[0];
    var width = banner.offsetWidth; //图片的宽度
    var imgBox = banner.getElementsByTagName('ul')[0]; //图片盒子
    var pointBox = banner.getElementsByTagName('ul')[1]; //点盒子
    var pointList = pointBox.getElementsByTagName('li'); //点数组

    var index = 1;
    var timer; //定时器

    //添加过度
    var addTransition = function () {
        imgBox.style.transition = "all .3s ease 0s";
        imgBox.style.webkitTransform = "all .3s ease 0s";
    };
    //减过度
    var removeTransition = function () {
        imgBox.style.transition = "none";
        imgBox.style.webkitTransform = "none";
    };
    //改变位置
    var setTransform = function (t) {
        imgBox.style.transition = "translateX("+t+"px)";
        imgBox.style.webkitTransform = "translateX("+t+"px)";
    };

    timer = setInterval(function () {
        index ++;
        addTransition();
        setTransform(-index*width);
    },3000);

    //点随之滚动
    var setPoint = function () {
        /*把所有点的样式清除*/
        for(var i = 0 ; i < pointList.length ; i ++)
        {
            pointList[i].className = " ";
        }
        pointList[index-1].className = "now";
    };

    //和onclick的不同是可以添加多个时间
    imgBox.addEventListener('transitionEnd',function () {
        if(index >= 9)
        {
            index = 1;
        }else if(index <= 0){
            index = 8;
        }
        removeTransition();
        setTransform(-index*width);
        setPoint();
    });

    imgBox.addEventListener('webkitTransitionEnd',function () {
        if(index >= 9)
        {
            index = 1;
        }else if(index <= 0){
            index = 8;
        }
        removeTransition();
        setTransform(-index*width);
        setPoint();
    });

    var moveX = 0;
    //触摸事件开始
    imgBox.addEventListener('touchstart',function (e) {
        console.log('start');
        startX = e.touches[0].clientX;
    });
    //触摸事件
    imgBox.addEventListener('touchmove',function (e) {
        clearInterval(timer);
        /*清除默认的滚动事件*/
        //e.preventDefault();
        console.log('move');
        endX = e.touches[0].clientX; //记录结束位置
        moveX = startX - endX; //记录移动距离
        removeTransition();
        setTransform(-index*width-moveX);
    });
    //结束触摸事件
    imgBox.addEventListener('touchend',function () {
        console.log('end');
        if(Math.abs(moveX) > (1/3*width) && endX != 0)
        {
            if(moveX > 0)
            {
                index ++;
            }
            else
            {
                index --;
            }
            setTransform(-index*width);
        }
        addTransition();
        setTransform(-index*width);

        //初始化
        startX = 0;
        endX = 0;
        clearInterval(timer);
        timer = setInterval(function () {
            index++;
            addTransition();
            setTransform(-index*width);
        },3000);
    });
};